{#
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{# The 142 release is a new design, so we use a new base template #}
{% extends "firefox/whatsnew/base-new-theme.html" %}

{% block wnp_content %}
<div class="wnp-page">
  <main class="wnp-main">
    <!-- Hero Section -->
    <section class="wnp-section wnp-section-intro">
      <div class="wnp-container">
        <div class="wnp-intro-layout">
          <div class="wnp-intro-content">
            <p class="wnp-eyebrow">What’s New | Firefox {{ major_version }}</p>
            <h1 class="wnp-title">Keep your email address to yourself.</h1>
            <p class="wnp-subtitle-5">Firefox Relay generates secure email masks when you sign up for new online accounts, so you can stay anonymous and get less spam in your inbox.</p>
            <div class="wnp-btn-wrap">
              <a class="wnp-button wnp-button-secondary" href="https://relay.firefox.com/?{{ utm_params }}" data-cta-text="Try Relay">
                Try Relay
                <img class="wnp-button-icon" src="/media/img/firefox/whatsnew/whatsnew142/arrow-right.svg" width="16" height="16" alt="" aria-hidden="true">
              </a>
            </div>
          </div>
          <div class="wnp-intro-media" aria-hidden="true">
            <div class="wnp-media-frame wnp-media-frame--settings">
              <picture>
                <source
                  srcset="/media/img/firefox/whatsnew/whatsnew142/relay-hero-600.png 600w, /media/img/firefox/whatsnew/whatsnew142/relay-hero-1200.png 1200w, /media/img/firefox/whatsnew/whatsnew142/relay-hero-1800.png 1800w"
                  sizes="(max-width: 1024px) 100%, 520px"
                  type="image/png" />
                <img src="/media/img/firefox/whatsnew/whatsnew142/relay-hero-600.png" alt="Illustration of privacy and security oriented features">
              </picture>
            </div>
          </div>
        </div>
      </div>
    </section>


<!-- Section 2: Headlines / Sub Features -->
    <section class="wnp-section" aria-labelledby="features-heading">
      <div class="wnp-container">
        <h2 id="features-heading" class="wnp-subtitle text-center">Know before you click. Stay in control as you browse.</h2>
        <p class="wnp-body wnp-is-centered">Firefox helps you preview links and keep tabs tidy so nothing slows you down.</p>

        <div class="wnp-feature">
          <div class="wnp-feature-media" aria-hidden="true">
            <div class="wnp-media-frame wnp-media-frame--settings">
              <img
                src="/media/img/firefox/whatsnew/whatsnew142/link-previews.png"
                alt="Link previews illustration"
                srcset="
                  /media/img/firefox/whatsnew/whatsnew142/link-previews@2x.png 2x
                "
              />
            </div>
          </div>
          <div class="wnp-feature-content">
            <p class="wnp-feature-eyebrow">Link Previews</p>
            <h3 class="wnp-subtitle">See what's behind the link before you click.</h3>
            <p class="wnp-body">Link Previews show a snapshot of a page before you open it, helping you decide what’s worth your time. Just long press any link to preview and reduce distractions.</p>
            <div class="wnp-btn-wrap">
              <a class="wnp-button wnp-button-outline" href="https://connect.mozilla.org/t5/discussions/try-link-previews-in-firefox-142-see-what-s-behind-a-link-before/m-p/103496#M40177" aria-label="Learn more about Link Previews" data-cta-text="Learn more - link previews">Learn More
                <span class="wnp-button-icon wnp-button-icon-arrow" aria-hidden="true"></span>
              </a>
            </div>
          </div>
        </div>

        <div class="wnp-feature wnp-feature--reverse">
          <div class="wnp-feature-media" aria-hidden="true">
            <div class="wnp-media-frame wnp-media-frame--settings">
              <img
                src="/media/img/firefox/whatsnew/whatsnew142/tab-groups.png"
                alt="Tab groups illustration"
                srcset="
                  /media/img/firefox/whatsnew/whatsnew142/tab-groups@2x.png 2x
                "
              />
            </div>
          </div>
          <div class="wnp-feature-content">
            <p class="wnp-feature-eyebrow">AI-Enhanced Tab Groups</p>
            <h3 class="wnp-subtitle">Your tabs, automatically grouped by topic.</h3>
            <p class="wnp-body">A local AI model identifies similar tabs, automatically organizes them into groups, and even suggests group names, helping you stay organized. Everything happens on your device to respect your privacy.</p>
            <div class="wnp-btn-wrap"><a class="wnp-button wnp-button-outline" href="https://support.mozilla.org/en-US/kb/how-use-ai-enhanced-tab-groups" aria-label="Learn more about Smart Tab Groups" data-cta-text="Learn more - ai-enhanced tab groups">Learn More
                <span class="wnp-button-icon wnp-button-icon-arrow" aria-hidden="true"></span>
              </a>
            </div>
          </div>
        </div>

        <p class="wnp-link-wrap">
          <a class="wnp-link" href="/firefox/{{ version }}/releasenotes/" data-cta-text="See full release notes">See Full Release Notes</a>
        </p>
      </div>
    </section>



    <!-- Section 3: Desktop Feature Panels -->
    <section class="wnp-section wnp-section-highlights" aria-labelledby="highlights-heading">
      <div class="wnp-container">
        <h2 id="highlights-heading" class="wnp-subtitle text-center">Tailor Firefox to fit your flow.</h2>
        <p class="wnp-body wnp-has-subhead-spacing wnp-is-centered">Stay organized, find what you need, and browse your way.</p>
        <div class="wnp-grid">
          <article class="wnp-card">
            <div class="wnp-card-content">
              <img class="wnp-card-sticker" src="/media/img/firefox/whatsnew/whatsnew142/vertical-tabs-sticker.svg" data-dark-src="/media/img/firefox/whatsnew/whatsnew142/vertical-tabs-sticker-dark.svg" alt="" aria-hidden="true">
              <h3 class="wnp-subtitle">
                <a href="https://support.mozilla.org/en-US/kb/use-sidebar-access-tools-and-vertical-tabs" data-cta-text="Learn more - vertical tabs" aria-describedby="desc-vertical-tabs">Less clutter and more focus with vertical tabs</a>
              </h3>
              <p class="wnp-body">Firefox’s new sidebar lets you move tabs to the side, pin key sites and keep your AI assistant handy.</p>
              <a class="wnp-button wnp-button-outline" href="https://support.mozilla.org/en-US/kb/use-sidebar-access-tools-and-vertical-tabs" aria-label="Learn more about Vertical Tabs" data-cta-text="Learn more - vertical tabs" id="desc-vertical-tabs">
                Learn more <span class="wnp-button-icon wnp-button-icon-arrow" aria-hidden="true"></span>
              </a>
            </div>
          </article>
          <article class="wnp-card">
            <div class="wnp-card-content">
              <img class="wnp-card-sticker" src="/media/img/firefox/whatsnew/whatsnew142/tab-wallpapers-sticker.svg" data-dark-src="/media/img/firefox/whatsnew/whatsnew142/tab-wallpapers-sticker-dark.svg" alt="" aria-hidden="true">
              <h3 class="wnp-subtitle">
                <a href="https://support.mozilla.org/en-US/kb/customize-items-on-firefox-new-tab-page#w_change-whats-on-your-new-tab-page" data-cta-text="Learn more - new tab customization" aria-describedby="desc-new-tab">Make your New Tab feel like home</a>
              </h3>
              <p class="wnp-body">Create a space that’s uniquely yours. Set the mood with Firefox wallpapers, custom colors, or your own photo. Open a new tab and click the
                <svg class="wnp-inline-icon" width="16" height="16" viewBox="0 0 18 19" fill="currentColor" aria-label="pencil" role="img">
                  <g clip-path="url(#a)"><path fill="currentColor" d="M16.935 4.622 14 1.672a1.035 1.035 0 0 0-1.46 0L2.135 12.062l-.95 4.1a1.03 1.03 0 0 0 1 1.25q.107.01.215 0l4.145-.95 10.39-10.38a1.035 1.035 0 0 0 0-1.46m-10.89 10.94-3.885.815.885-3.81 7.785-7.755 3 3zM14.5 7.087l-3-3 1.74-1.73 2.95 3z"/></g><defs><clipPath id="a"><path d="M0 .462h18v18H0z"/></clipPath></defs>
                </svg> icon to start customizing.
              </p>
              <a class="wnp-button wnp-button-outline" href="https://support.mozilla.org/en-US/kb/customize-items-on-firefox-new-tab-page#w_change-whats-on-your-new-tab-page" aria-label="Learn more about customizing your New Tab Page" data-cta-text="Learn more - new tab customization" id="desc-new-tab">
                Learn more <span class="wnp-button-icon wnp-button-icon-arrow" aria-hidden="true"></span>
              </a>
            </div>
          </article>
          <article class="wnp-card">
            <div class="wnp-card-content">
              <img class="wnp-card-sticker" src="/media/img/firefox/whatsnew/whatsnew142/tab-groups-sticker.svg" data-dark-src="/media/img/firefox/whatsnew/whatsnew142/tab-groups-sticker-dark.svg" alt="" aria-hidden="true">
              <h3 class="wnp-subtitle">
                <a href="https://support.mozilla.org/en-US/kb/tab-groups" data-cta-text="Learn more - tab groups" aria-describedby="desc-tab-groups-card">Take control of your browsing with tab groups</a>
              </h3>
              <p class="wnp-body">No more tab overload. Stay organized and in control of your time and attention. Drag one tab onto another to create your first group.</p>
              <a class="wnp-button wnp-button-outline" href="https://support.mozilla.org/en-US/kb/tab-groups" aria-label="Learn more about Tab Groups" data-cta-text="Learn more - tab groups" id="desc-tab-groups-card">
                Learn more <span class="wnp-button-icon wnp-button-icon-arrow" aria-hidden="true"></span>
              </a>
            </div>
          </article>
        </div>
      </div>
    </section>

    <!-- Subscribe Banner -->
    <section class="wnp-section wnp-section-subscribe" aria-labelledby="subscribe-heading">
      <div class="wnp-container">
        <h2 id="subscribe-heading" class="wnp-subtitle text-center">Keep up with all things Firefox</h2>
        <p class="wnp-body wnp-is-centered">Get monthly how-tos, advice and news to make your Firefox experience work best for you.</p>
        {{ email_newsletter_form(
        template="firefox/whatsnew/includes/newsletter_form.html",
        include_country=true,
        include_language=true,
        footer=false,
        include_title=false
        ) }}
      </div>
    </section>

    <!-- Section 4: Mobile Features -->
    <section class="wnp-section wnp-section-mobile" aria-labelledby="wnp-mobile-heading">
      <div class="wnp-container">
        <h2 id="wnp-mobile-heading" class="wnp-subtitle text-center">What’s New on Firefox Mobile?</h2>
        <p class="wnp-body wnp-is-centered">New tools for focus, privacy, and smoother mobile browsing.</p>
        <div class="wnp-grid">
          <article class="wnp-card">
            <div>
              <span class="wnp-tag wnp-tag-purple"><img src="/media/img/firefox/whatsnew/whatsnew142/shield.svg" width="12" height="12" alt="" aria-hidden="true">Privacy</span><span class="wnp-tag wnp-tag-android"><img src="/media/img/firefox/whatsnew/whatsnew142/android-icon.png" width="12" height="12" alt="" aria-hidden="true">Android</span>
            </div>
            <h3 class="wnp-subtitle">Private tabs that stay private</h3>
            <p class="wnp-body">Your private tabs lock automatically when you step away — and only unlock with your face, fingerprint, or PIN.</p>
          </article>
          <article class="wnp-card">
            <div>
              <span class="wnp-tag wnp-tag-blue"><img src="/media/img/firefox/whatsnew/whatsnew142/language-icon.svg" width="12" height="12" alt="" aria-hidden="true">Language</span><span class="wnp-tag wnp-tag-android"><img src="/media/img/firefox/whatsnew/whatsnew142/android-icon.png" width="12" height="12" alt="" aria-hidden="true">Android</span>
            </div>
            <h3 class="wnp-subtitle">Getting even more multilingual</h3>
            <p class="wnp-body">Now translate web pages into Japanese, Chinese, Korean and more, so you can browse in your preferred language.</p>
          </article>
          <article class="wnp-card">
            <div>
              <span class="wnp-tag wnp-tag-orange"><img src="/media/img/firefox/whatsnew/whatsnew142/shield.svg" width="12" height="12" alt="" aria-hidden="true">Security</span><span class="wnp-tag wnp-tag-ios"><img src="/media/img/firefox/whatsnew/whatsnew142/apple-icon.png" width="12" height="12" alt="" aria-hidden="true">iOS</span>
            </div>
            <h3 class="wnp-subtitle">Smarter passwords, fewer hassles</h3>
            <p class="wnp-body">Firefox suggests strong passwords when you’re creating a new account on any site, and keeps them secure, ready on any device when you sync.</p>
          </article>
          <article class="wnp-card">
            <div>
              <span class="wnp-tag wnp-tag-yellow"><img src="/media/img/firefox/whatsnew/whatsnew142/design-icon.svg" width="12" height="12" alt="" aria-hidden="true">Design</span><span class="wnp-tag wnp-tag-ios"><img src="/media/img/firefox/whatsnew/whatsnew142/apple-icon.png" width="12" height="12" alt="" aria-hidden="true">iOS</span>
            </div>
            <h3 class="wnp-subtitle">A cleaner look with sharper focus</h3>
            <p class="wnp-body">A streamlined UI and upgraded dark mode on Firefox for iOS bring clarity and calm to everything you browse.</p>
          </article>
        </div>
      </div>
    </section>

    <!-- QR Code Banner -->
    <section class="wnp-section wnp-section-mobile" aria-labelledby="wnp-qr-qr-heading">
      <div class="wnp-container">
        <div class="wnp-qr">
          <div class="wnp-qr-layout">
            <div class="wnp-qr-media" aria-hidden="true">
              <div class="wnp-qr-qr" data-href="https://www.mozilla.org/firefox/browsers/mobile/app/?product=firefox&campaign=whatsnew-{{ major_version }}" aria-label="QR code to download Firefox Mobile" role="img">{{ qrcode("https://www.mozilla.org/firefox/browsers/mobile/app/?product=firefox&campaign=whatsnew-" ~ major_version, 12) }}</div>
            </div>
            <div class="wnp-qr-content">
              <div class="wnp-qr-content-inner">
                <h2 id="wnp-qr-qr-heading" class="wnp-subtitle">Take Firefox with you</h2>
                <p class="wnp-body">Scan the QR code to get Firefox Mobile and browse with calm, focus, and control — wherever you go.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

  </main>
</div>
{% endblock %}
